<script setup lang="ts">
import type { ElForm } from 'element-plus'

import apiServe from '@/api'
import { setToken } from '@/utils/token-util'

import { Lock, User } from '@element-plus/icons-vue'

import { onMounted, ref } from 'vue'

const route = useRoute()
const router = useRouter()

const loading = ref(false)

const formRef = ref<InstanceType<typeof ElForm>>()
const formData = reactive({
  username: 'admin',
  password: '123456',
})
const rules = {
  username: { required: true, message: '请输入用户名', trigger: 'change' },
  password: { required: true, message: '请输入密码', trigger: 'change' },
}

const systemName = ref('机动车安全检测平台（离线版）');
 
 onMounted(() => {
   console.log('组件已挂载到DOM！')
   apiServe.user.userLogin({
      }).then(res => {
        setToken(res.token)
        ElMessage.success('登录成功')
        const redirectPath = route.query.redirect as string
        if (redirectPath) {
          const redirect = decodeURIComponent(redirectPath)
          router.replace(redirect)
          return
        }
        router.replace('/')
      }).finally(() => {
        loading.value = false
      })
 })


const submit = () => {
  formRef.value?.validate(valid => {
    if (valid) {
      loading.value = true
      const { username, password } = formData
      apiServe.user.userLogin({
        username,
        password
      }).then(res => {
        setToken(res.token)
        ElMessage.success('登录成功')
        const redirectPath = route.query.redirect as string
        if (redirectPath) {
          const redirect = decodeURIComponent(redirectPath)
          router.replace(redirect)
          return
        }
        router.replace('/')
      }).finally(() => {
        loading.value = false
      })
    }
  })
}

</script>

<template>
  <div class="view_account">
    <div class="view_account_container">
      <div class="view_account_top">
        <div class="view_account_top_desc">
          <h3>{{systemName}}</h3>
        </div>
      </div>
      <div class="view_account_form">
        <el-form
          ref="formRef"
          size="large"
          :model="formData"
          :rules="rules"
        >
          <el-form-item prop="username">
            <el-input v-model="formData.username">
              <template #prefix>
                <el-icon class="el-input__icon">
                  <User />
                </el-icon>
              </template>
            </el-input>
          </el-form-item>
          <el-form-item prop="password">
            <el-input
              v-model="formData.password"
              type="password"
              show-password
            >
              <template #prefix>
                <el-icon class="el-input__icon">
                  <Lock />
                </el-icon>
              </template>
            </el-input>
          </el-form-item>
          <el-form-item>
            <el-button
              class="width_100"
              type="primary"
              :disabled="loading"
              @click="submit"
            >
              登录
            </el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>
  </div>
</template>

<style scoped lang="less">
@import "index.less";
</style>
